import { useRef, useEffect, useState } from 'react';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';

export default function Box() {
  const ref = useRef<HTMLDivElement>(null);
  const isIntersecting = useIntersectionObserver(ref);

  useEffect(() => {
   if(!ref.current) return
   if (isIntersecting) {
      ref.current.style.backgroundColor = 'red';
      ref.current.style.color = 'white';
    } else {
      ref.current.style.backgroundColor = 'blue';
      ref.current.style.color = 'white';
    }
  }, [isIntersecting]);

  return (
    <div ref={ref} style={{
      margin: 20,
      height: 100,
      width: 100,
      border: '2px solid black',
      backgroundColor: 'blue'
    }} />
  );
}